import { connect } from "dva";
import styles from "./index.less";
import { InputItem, Button, Calendar, WingBlank } from "antd-mobile";
import icon_right from "images/hexagon-line.png";
import select_date from "../../assets/slect-date@3x.png";
function App({ myShoppingGuide, dispatch }) {
  const { calendarVisible } = myShoppingGuide;
  const onCancel = () => {
    dispatch({
      type: "myShoppingGuide/onCalendar",
      payload: {
        calendarVisible: false
      }
    });
  };
  const onConfirm = () => {
    console.log("onConfirm");
  };
  const onSelectHasDisableDate = () => {
    console.log("onSelectHasDisableDate");
  };
  const getDateExtra = () => {
    console.log("getDateExtra");
  };
  const now = new Date();
  const showCalendar = () => {
    dispatch({
      type: "myShoppingGuide/onCalendar",
      payload: {
        calendarVisible: true
      }
    });
  };
  return (
    <div>
      <Calendar
        visible={calendarVisible}
        onCancel={onCancel}
        onConfirm={onConfirm}
        onSelectHasDisableDate={onSelectHasDisableDate}
        getDateExtra={getDateExtra}
        defaultDate={now}
        minDate={new Date(+now - 5184000000)}
        maxDate={new Date(+now + 31536000000)}
      />
      <div className={styles.normal}>
        <div className={styles.date} onClick={showCalendar}>
          <InputItem
            className={styles._date}
            placeholder="2018年10月1日-2018年10月15日"
            disabled
            >
            导购日期
          </InputItem>
          <div className={styles.img}>
            <img width=".34rem" height=".30rem" src={select_date} alt="" />
          </div>
        </div>
        {/* <div> */}
        <InputItem
         className={styles.text_style}
          placeholder="请输入姓名"
          clear
        >
          客户姓名
        </InputItem>
        {/* </div> */}
        <InputItem
          clear
          className={styles.text_style}
          placeholder="请输入电话号码"
        >
          客户电话
        </InputItem>

        <InputItem
          clear
          className={styles.text_style}
          placeholder="请输入电话号码"
        >
          商品名称
        </InputItem>

        <div className={styles.next}>
          <Button className={styles.button}>查询</Button>
        </div>
      </div>

      <div className={styles.divider} />

      <div>
        <div className={styles.RecordNum}>
          <div>共12条记录</div>
        </div>
      </div>

      <div className={styles.title}>
        <div className={styles.title_1}>
          <div>序号</div>
        </div>
        <div className={styles.title_2}>
          <div>商品名称</div>
        </div>
        <div className={styles.title_3}>
          <div>导购日期</div>
        </div>
        <div className={styles.title_4}>
          <div>客户名称</div>
        </div>
        <div className={styles.title_5}>
          <div>联系电话</div>
        </div>
      </div>

      <div className={styles.title}>
        <div className={styles.title_12}>
          <div>1</div>
        </div>
        <div className={styles.title_22}>
          <div>iphone7 64g 黑</div>
        </div>
        <div className={styles.title_32}>
          <div className={styles.dateSeparator}>
            <div>2018-9-10</div>
            <div>21:12:32</div>
          </div>
        </div>
        <div className={styles.title_42}>
          <div>张三</div>
        </div>
        <div className={styles.title_52}>
          <div>18899887675</div>
        </div>
      </div>
      <div className={styles.title}>
        <div className={styles.title_12}>
          <div>1</div>
        </div>
        <div className={styles.title_22}>
          <div>儿童手表</div>
        </div>
        <div className={styles.title_32}>
          <div className={styles.dateSeparator}>
            <div>2018-9-10</div>
            <div>21:12:32</div>
          </div>
        </div>
        <div className={styles.title_42}>
          <div>王思</div>
        </div>
        <div className={styles.title_52}>
          <div>18899887675</div>
        </div>
      </div>
      <div className={styles.title}>
        <div className={styles.title_12}>
          <div>1</div>
        </div>
        <div className={styles.title_22}>
          <div>iphone7 的推广</div>
        </div>
        <div className={styles.title_32}>
          <div className={styles.dateSeparator}>
            <div>2018-9-10</div>
            <div>21:12:32</div>
          </div>
        </div>
        <div className={styles.title_42}>
          <div>Ham</div>
        </div>
        <div className={styles.title_52}>
          <div>18899887675</div>
        </div>
      </div>
      <div className={styles.title}>
        <div className={styles.title_12}>
          <div>1</div>
        </div>
        <div className={styles.title_22}>
          <div>iphone7 的推广</div>
        </div>
        <div className={styles.title_32}>
          <div className={styles.dateSeparator}>
            <div>2018-9-10</div>
            <div>21:12:32</div>
          </div>
        </div>
        <div className={styles.title_42}>
          <div>Otamar</div>
        </div>
        <div className={styles.title_52}>
          <div>18899887675</div>
        </div>
      </div>
      <div className={styles.title}>
        <div className={styles.title_12}>
          <div>1</div>
        </div>
        <div className={styles.title_22}>
          <div>iphone7 的推广</div>
        </div>
        <div className={styles.title_32}>
          <div className={styles.dateSeparator}>
            <div>2018-9-10</div>
            <div>21:12:32</div>
          </div>
        </div>
        <div className={styles.title_42}>
          <div>Sakane</div>
        </div>
        <div className={styles.title_52}>
          <div>13288009088</div>
        </div>
      </div>
    </div>
  );
}
export default connect(({ myShoppingGuide }) => ({ myShoppingGuide }))(App);
